<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
        <meta name="description" content=""/>
        <meta name="keywords" content=""/>
        
        <title>ziceinclude&trade; admin version 1.4 online</title>

        <!-- Link shortcut icon-->
        <link rel="shortcut icon" type="image/ico" href="images/favicon2.ico"/> 

        <!-- Link css-->
        <link rel="stylesheet" type="text/css" href="css/zice.style.css"/>

		
        <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="components/flot/excanvas.min.js"></script><![endif]-->  
		
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="components/ui/jquery.ui.min.js"></script> 
        <script type="text/javascript" src="components/ui/jquery.autotab.js"></script>
        <script type="text/javascript" src="components/ui/timepicker.js"></script>
        <script type="text/javascript" src="components/colorpicker/js/colorpicker.js"></script>
        <script type="text/javascript" src="components/checkboxes/iphone.check.js"></script>
        <script type="text/javascript" src="components/elfinder/js/elfinder.full.js"></script>
        <script type="text/javascript" src="components/datatables/dataTables.min.js"></script>
        <script type="text/javascript" src="components/datatables/ColVis.js"></script>
        <script type="text/javascript" src="components/scrolltop/scrolltopcontrol.js"></script>
        <script type="text/javascript" src="components/fancybox/jquery.fancybox.js"></script>
        <script type="text/javascript" src="components/jscrollpane/mousewheel.js"></script>
        <script type="text/javascript" src="components/jscrollpane/mwheelIntent.js"></script>
        <script type="text/javascript" src="components/jscrollpane/jscrollpane.min.js"></script>
        <script type="text/javascript" src="components/spinner/ui.spinner.js"></script>
        <script type="text/javascript" src="components/tipsy/jquery.tipsy.js"></script>
        <script type="text/javascript" src="components/editor/jquery.cleditor.js"></script>
        <script type="text/javascript" src="components/chosen/chosen.js"></script>
        <script type="text/javascript" src="components/confirm/jquery.confirm.js"></script>
        <script type="text/javascript" src="components/validationEngine/jquery.validationEngine.js"></script>
        <script type="text/javascript" src="components/validationEngine/jquery.validationEngine-en.js"></script>
        <script type="text/javascript" src="components/vticker/jquery.vticker-min.js"></script>
        <script type="text/javascript" src="components/sourcerer/sourcerer.js"></script>
        <script type="text/javascript" src="components/fullcalendar/fullcalendar.js"></script>
        <script type="text/javascript" src="components/flot/flot.js"></script>
        <script type="text/javascript" src="components/flot/flot.pie.min.js"></script>
        <script type="text/javascript" src="components/flot/flot.resize.min.js"></script>
        <script type="text/javascript" src="components/flot/graphtable.js"></script>
        <script type="text/javascript" src="components/uploadify/swfobject.js"></script>
        <script type="text/javascript" src="components/uploadify/uploadify.js"></script>        
        <script type="text/javascript" src="components/checkboxes/customInput.jquery.js"></script>
        <script type="text/javascript" src="components/effect/jquery-jrumble.js"></script>
        <script type="text/javascript" src="components/filestyle/jquery.filestyle.js"></script>
        <script type="text/javascript" src="components/placeholder/jquery.placeholder.js"></script>
		<script type="text/javascript" src="components/Jcrop/jquery.Jcrop.js"></script>
        <script type="text/javascript" src="components/imgTransform/jquery.transform.js"></script>
        <script type="text/javascript" src="components/webcam/webcam.js"></script>
		<script type="text/javascript" src="components/rating_star/rating_star.js"></script>
		<script type="text/javascript" src="components/dualListBox/dualListBox.js"></script>
		<script type="text/javascript" src="components/smartWizard/jquery.smartWizard.min.js"></script>
		<script type="text/javascript" src="components/maskedinput/jquery.maskedinput.js"></script>
        <script type="text/javascript" src="components/highlightText/highlightText.js"></script>
		<script type="text/javascript" src="components/elastic/jquery.elastic.source.js"></script>
        <script type="text/javascript" src="js/jquery.cookie.js"></script>
        <script type="text/javascript" src="js/zice.custom.js"></script>    
 

         <!--Custom your google API-->
        <script src="http://maps.googleapis.com/maps/api/js?key=AABQIAAAAjvif4arcweUxUOK61INo8xSsqLxHdvErojq1EWPUb5Kzt33m3RSj9yXHR4jfSOD1LlailqjCKxqdJQ&amp;sensor=false" type="text/javascript"></script>
        <script type="text/javascript">
        function initialize() {
            var map,GGM,geocoder ; 
            GGM=new Object(google.maps); 
            geocoder = new GGM.Geocoder();  
            var my_Latlng  = new GGM.LatLng(16.884589730008706,100.84110740852361);
            var my_mapTypeId=GGM.MapTypeId.ROADMAP;
            var my_DivObj=$("#map_canvas")[0]; 
            var myOptions = {
                zoom: 1, 
                center: my_Latlng , 
                mapTypeId:my_mapTypeId 
            };
        
              map = new GGM.Map(my_DivObj,myOptions); 
              var my_Marker = new GGM.Marker({ position: my_Latlng, map: map, draggable:true, title:"Drag Me!" });
              GGM.event.addListener(my_Marker, 'dragend', function() {
                  var my_Point = my_Marker.getPosition();  
                  map.panTo(my_Point);  
                  geocoder.geocode({'latLng': my_Point}, function(results, status) {
                          if (status == GGM.GeocoderStatus.OK) {
                                if (results[1]) { $("#contact_address").val(results[1].formatted_address); }
                          } else {
                              alert("Unknouwn Place in Map");
                          }
                  });	
                  $("#lat_value").val(my_Point.lat()); 
                  $("#lon_value").val(my_Point.lng()); 
                  $("#zoom_value").val(map.getZoom()); 
              });		
            GGM.event.addListener(map, 'zoom_changed', function() {
                $("#zoom_value").val(map.getZoom());
            });
            GGM.event.addListener(map, "maptypeid_changed", function() {
                  $("#type_value").val(map.getMapTypeId());
            })
        }
        
        function loadScript() {
          var script = document.createElement("script");
          script.type = "text/javascript";
          script.src = "http://maps.google.com/maps/api/js?v=3&sensor=false&language=en&callback=initialize";
          document.body.appendChild(script);
        }
        $(document).ready(function(){	loadScript();  });	
        </script>       
        
        </head>        
        <body class="dashborad">        
        <div id="alertMessage" class="error"></div>
		<!-- Header -->
        <div id="header">
                <div id="account_info"> 
					<div class="setting"><b>Welcome,</b> <b class="red">John Doe</b><img src="images/gear.png" class="gear"  alt="Profile Setting" >
                        <ul class="subnav ">
                            <li><a href="#">Setting</a></li>
							<br class="clear"/>
                        </ul>
                  </div>
					<div class="logout" title="Disconnect"><b >Logout</b> <img src="images/connect.png" name="connect" class="disconnect" alt="disconnect" ></div> 
                </div>
            </div><!-- End Header -->
			<div id="shadowhead"></div>

              <div id="left_menu">
                    <ul id="main_menu" class="main_menu">
                      <li class="limenu" ><a href="dashboard.html"><span class="ico gray shadow home" ></span><b>Dashboard</b></a></li>
                      <li class="limenu" ><a href="#" ><span class="ico gray shadow window"></span><b>Form elements</b></a>
                        <ul>
                          <li ><a href="form.html"> basic form </a></li>
                          <li ><a href="vform.html"> validation </a></li>
                          <li ><a href="wizard.html"> wizard </a></li>
                        </ul>
                      </li>
                      <li class="limenu" ><a href="#"><span class="ico gray  dimensions" ></span><b>Sample pages</b></a>
                        <ul>
                          <li ><a href="profile.html"> Profile setting </a></li>
                          <li ><a href="conversation.html"> conversation</a></li>
                          <li ><a href="imagesEditor.html"> Images Editor </a></li>
                          <li ><a href="barcode.html"> barcode </a></li>
                          <li ><a href="messages.html"> messages </a></li>
                          <li ><a href="grid.html"> Grid System </a></li>
                        </ul>
                      </li>
					  <li class="limenu" ><a href="ajax.html"><span class="ico gray shadow   encrypt"></span><b>Sample ajax</b> </a></li>
                      <li class="limenu" ><a href="table.html"><span class="ico gray shadow  spreadsheet"></span><b>Tables</b> </a></li>
                      <li class="limenu" ><a href="gallery.html"><span class="ico gray shadow pictures_folder"></span><b>Gallery </b></a></li>
                      <li class="limenu" ><a href="#"><span class="ico gray shadow stats_lines"></span><b>Graph and Charts</b> </a>
                        <ul>
                          <li><a href="modalchartLive.html" class="pop_box">live chart </a></li>
                          <li><a href="chart.html">all chart</a></li>
                        </ul>
                      </li>
                      <li class="limenu" ><a href="filemanager.html"><span class="ico gray shadow  file"></span><b>File manager </b></a></li>
                      <li class="limenu" ><a href="calendar.html"><span class="ico gray shadow calendar"></span><b>Calendar </b></a></li>
                      <li class="limenu" ><a href="typography.html"><span class="ico gray  shadow paragraph_align_left"></span><b>Typography</b></a></li>
                      <li class="limenu" ><a href="inelement.html"><span class="ico gray shadow abacus"></span><b>Interface elements </b></a></li>
                      <li class="limenu select" ><a href="map.html"><span class="ico gray shadow  location"></span><b>Map location </b></a></li>
                      <li class="limenu" ><a href="icon.html"><span class="ico gray  shadow satellite"></span><b>Icon and Button </b></a></li>
					  <li class="limenu" ><a href="404.html"><span class="ico gray  shadow firewall"></span><b>Error Pages</b></a></li>
                      <li class="limenu" ><a href="doc.html"><span class="ico gray  notepad"></span><b>Documentation</b></a></li>

                        
                    </ul>
              </div>
               <div id="expandbtn"><span class="off">&nbsp;</span><span class="on">&nbsp;</span></div>

            
            <div id="content">
                <div class="inner">
					<div class="topcolumn">
						<div class="logo"></div>
                            <ul  id="shortcut">
                                <li> <a href="#" title="Back To home"> <img src="images/icon/shortcut/home.png" alt="home"/><strong>Home</strong> </a> </li>
                                <li> <a href="#" title="Website Graph"> <img src="images/icon/shortcut/graph.png" alt="graph"/><strong>Graph</strong> </a> </li>
                                <li> <a href="#" title="Setting" > <img src="images/icon/shortcut/setting.png" alt="setting" /><strong>Setting</strong></a> </li> 
                                <li> <a href="#" title="Messages"> <img src="images/icon/shortcut/mail.png" alt="messages" /><strong>Message</strong></a><div class="notification" >10</div></li>
                            </ul>
					</div>
                    <div class="clear"></div>   
                               
					<!-- full width -->
                    <div class="widget" >
                        <div class="header"><span > <span class="ico gray location"></span> MAP and Contact</span>
                            <div class="searchBox">
                            <div class="searchAutocomplete"></div>
                            <div class="searchText">
                                <form action="http://www.google.com" method="GET">
                                    <input  type="text"  nane="s" id="sAtcom"placeholder="Live Search..."/>
                                </form>
                            </div>
                            </div>
						</div><!-- End header -->	
                        <div class="content" >
                    
                            <!--Start tab-->
                                <div id="UITab">
                                    <ul class="tabs" >
                                        <li ><a href="#tab1">  map location </a></li>       
                                   </ul>
                                   
                             	   <div class="tab_container" >
                                    <div id="tab1" class="tab_content"> 
                                        <div class="load_page">
                                        
                                          <ul class="uibutton-group">
                                              <li><a class="uibutton pop_box special icon add"   href="mapapi.html"  >Google API</a></li>     
                                          </ul>
                                          
                                            <form action="">
                                            <ul class="uibutton-group">
                                                  <li><a class="uibutton loading"  title="Saving"  rel="1"> Save </a></li>
                                                  <li><a class="uibutton pop_box special"   href="modalmapapi.html"  >Google API</a></li>     
                                            </ul>
                                            
                                            <div class="disabled_map">Map  show option </div>
                                            <div id="map_canvas" > </div>
                                            
                                            <div class="clear"></div>
                                            
                                            <!-- Half width column-->
                                            <div class="widgets">
                                                <div class="oneTwo">
                                                      <div class="section ">
                                                          <label>company name<small>Text custom</small></label>
                                                          <div ><input name="company_name" type="text"  class="validate[required] full" value="Zicedemo" /></div>
                                                      </div>
                                                        <div class="section ">
                                                            <label>local address  <small>Text custom</small></label>
                                                            <div ><textarea name="contact_address" id="contact_address"  class="validate[required] full" style="height:210px">Ban Yaeng, Nakhon Thai, Phitsanulok, Thailand</textarea></div>
                                                      </div>
                                                        <div class="section ">
                                                            <label>Email address <small>Text custom</small>  </label>
                                                            <div ><input type="text" name="contact_email" id="contact_email"  class="large"  value="support@gmail.com"/></div>
                                                      </div>
                                                        <div class="section ">
                                                            <label>Number Phone  <small>Text custom</small></label>
                                                            <div ><input type="text" name="contact_tel" id="contact_tel" class="medium"   value=""/> </div>
                                                      </div>
                                                        <div class="section last">
                                                            <div> <a class="uibutton loading"  title="Saving"  rel="1">SAVE </a></div>
                                                      </div>
                                               </div>
                                            
                                                <div class="oneTwo">
                                                  <div class="section ">
                                                          <label>Setting option <small>Text custom</small></label>
                                                          <div > <input type="checkbox" id="show_conmap" name="show_conmap" class="show_conmap"  value="1"      /><span class="f_help">Google  Map  </span></div>
                                                          <div > <input type="checkbox" id="show_email" name="show_email" class="show_email"  value="1"  checked="checked"   /><span class="f_help">Email show </span></div>
                                                  </div>
                                                  <div class="section  last ">
                                                          <label>Map option value<small>Text custom</small></label>        
                                                          <div> <span class="tip "><input name="type_value"  type="text" id="type_value" value="ROADMAP"title="Map type" /></span></div>
                                                          <div> <span class="tip"><input name="lat_value" type="text" id="lat_value" value="16.884589730008706" title="latitude" /></span></div>
                                                          <div> <span class="tip"><input name="lon_value"  type="text" id="lon_value" value="100.84110740852361" title="longitude"/></span></div>
                                                          <div > <span class="tip"><input name="zoom_value" type="text"  class="small" id="zoom_value" value="8"  title="zoom level"/> </span></div>
                                                  </div>
                                            </div>
                                            
                                            </div><!--End  Half width column-->
                                          </form> 
                                          
                                        </div>	
                                    </div><!--tab1-->
        
                            </div>
                            </div><!--END UITab-->
                    
                            <!-- clear fix -->
							<div class="clear"></div>

                        </div><!-- End content -->
                    </div><!-- End full width -->
                    
					<!-- clear fix -->
					<div class="clear"></div>

                    <div id="footer"> &copy; Copyright 2012 <span class="tip"><a  href="#" title="Nextop.Asia co.,Ltd." >Nextop.Asia</a> </span> </div>

                </div> <!--// End inner -->
              </div> <!--// End content --> 
</body>
</html>
 